<template>
  <div class="main">
    <div class="bigPic"> <!-- 大图容器 -->
      <el-image :src="lists[curIndex].src" fit="cover"></el-image>
    </div>
    <div class="samllPic-container"><!-- 小图容器 -->
      <!-- v-for渲染每个小图 -->
      <div class="samllPic"
           v-for="(item,index) in lists"
           :key="item.id"
           :class="{'active':curIndex === index}"
           @click = "curIndex = index"
           ref="itemRefsList"
      >
        <el-image :src="item.src" fit="cover"></el-image>
      </div>
    </div>
    <div class="right">
      <div>
        <el-input-number v-model="addNum"></el-input-number>
      </div>
      <div style="margin-top: 16px;">
        <el-button type="primary" @click="addsCart">加入题库</el-button>
      </div>
    </div>
  </div>
  <Ball :src="lists[curIndex].src" :position="position" :elPosition="elPosition" :show-ball="showBall" @trans-end="transBallEnd"></Ball>
  <Cart :num="cartNum" @getPosition="getCartsPosition"></Cart>
</template>

<script setup lang="ts">
import { ElInputNumber, ElButton, ElImage } from 'element-plus'
import Ball from './components/Ball.vue'
import Cart from './components/Cart.vue'
import {ref, reactive} from "vue";

const curIndex = ref(0)
const lists = ref([
  {
    id: '001',
    src: '/src/assets/images/01.jpeg'
  },
  {
    id: '002',
    src: '/src/assets/images/02.jpeg'
  },
  {
    id: '003',
    src: '/src/assets/images/03.jpeg'
  },
  {
    id: '004',
    src: '/src/assets/images/04.jpeg'
  }
])
const addNum = ref(1)
const itemRefsList = ref([]) //所有小商品容器的dom结构

const showBall = ref<Array<boolean>>([])//控制小球显示与隐藏

// 小球的位置
const elPosition = reactive({
  left: 0,
  top: 0
})
// 购物车的位置
const position = ref({})
// 购物车显示的数字
const cartNum = ref(0)

const addsCart = ()=>{ //点击加入购物车按钮后,获取选中小商品的位置信息
  showBall.value.push(true)
  elPosition.left = itemRefsList.value[curIndex.value].getBoundingClientRect().left + 90;
  elPosition.top = itemRefsList.value[curIndex.value].getBoundingClientRect().top + 120;
}

const transBallEnd = (arr: any) => {
  showBall.value = Object.assign([], arr)
  cartNum.value = cartNum.value + addNum.value
}

const getCartsPosition = (posi: any) => {
  position.value = Object.assign({}, posi)
}
</script>

<style scoped lang="scss">
.main {
  display: flex;
  justify-content: flex-start;
  .bigPic {
    flex: 1;
  }
  .samllPic-container {
    margin-left: 16px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    width: 100px;
    .samllPic {
      height: 100px;
      margin-bottom: 8px;
      cursor: pointer;
      .el-image {
        width: 100px;
        height: 100px;
      }
    }
  }
  .right {
    width: 200px;
    margin-left: 30px;
  }
}
</style>
